<template>
	<div class="route-detail-container layout-pd">
		<!-- 路线头部信息 -->
		<el-card shadow="hover" class="route-header mb20">
			<div class="header-content">
				<div class="route-meta">
					<el-tag :type="getDifficultyType(route.difficulty)" size="large">
						{{ route.difficulty }}
					</el-tag>
					<h1 class="route-title">{{ route.name }}</h1>
					<div class="route-stats">
						<span class="stat-item">
							<el-icon><Collection /></el-icon>
							{{ route.problems.length }} 题
						</span>
						<span class="stat-item">
							<el-icon><User /></el-icon>
							{{ route.studyCount }} 人学习
						</span>
						<span class="stat-item">
							<el-icon><Clock /></el-icon>
							预计 {{ route.estimateTime }} 小时
						</span>
					</div>
				</div>
				<div class="route-actions">
					<el-button type="primary" size="large" @click="startRoute">
						<el-icon><CirclePlus /></el-icon>
						开始学习
					</el-button>
					<el-button size="large" @click="toggleBookmark">
						<el-icon v-if="isBookmarked"><StarFilled /></el-icon>
						<el-icon v-else><Star /></el-icon>
						{{ isBookmarked ? '已收藏' : '收藏' }}
					</el-button>
				</div>
			</div>
		</el-card>

		<!-- 路线主要内容 -->
		<el-row :gutter="20">
			<!-- 左侧内容区 -->
			<el-col :span="18">
				<!-- 路线介绍 -->
				<el-card shadow="hover" class="mb20">
					<h2 class="section-title">
						<el-icon><InfoFilled /></el-icon> 路线介绍
					</h2>
					<div class="route-content">
						{{ route.contents }}
					</div>
				</el-card>

				<!-- 学习目标 -->
				<el-card shadow="hover" class="mb20">
					<h2 class="section-title">
						<el-icon><Aim /></el-icon> 学习目标
					</h2>
					<div class="route-objective">
						{{ route.object }}
					</div>
				</el-card>

				<!-- 题目列表 -->
				<el-card shadow="hover">
					<h2 class="section-title">
						<el-icon><List /></el-icon> 题目列表
					</h2>
					<el-table :data="route.problems" style="width: 100%">
						<el-table-column label="状态" width="80">
							<template #default="{ row }">
								<el-icon v-if="completedProblems.includes(row.id)" color="#67C23A">
									<CircleCheckFilled />
								</el-icon>
								<el-icon v-else-if="inProgressProblems.includes(row.id)" color="#E6A23C">
									<Loading />
								</el-icon>
								<el-icon v-else color="#909399">
									<CircleCloseFilled />
								</el-icon>
							</template>
						</el-table-column>
						<el-table-column prop="id" label="ID" width="80" />
						<el-table-column prop="title" label="题目名称">
							<template #default="{ row }">
								<router-link :to="`/problem/${row.id}`" class="problem-title">
									{{ row.title }}
								</router-link>
							</template>
						</el-table-column>
						<el-table-column prop="difficulty" label="难度" width="120">
							<template #default="{ row }">
								<el-tag :type="getProblemDifficultyType(row.difficulty)" size="small">
									{{ row.difficulty }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="标签" width="200">
							<template #default="{ row }">
								<el-tag v-for="tag in row.tags" :key="tag" size="small" class="mr5 mb5">
									{{ tag }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="120">
							<template #default="{ row }">
								<el-button type="primary" size="small" @click="goToProblem(row.id)"> 开始 </el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</el-col>

			<!-- 右侧侧边栏 -->
			<el-col :span="6">
				<!-- 学习进度 -->
				<el-card shadow="hover" class="mb20">
					<h2 class="section-title">
						<el-icon><DataLine /></el-icon> 学习进度
					</h2>
					<div class="progress-container">
						<el-progress type="dashboard" :percentage="progressPercentage" :color="progressColors" />
						<div class="progress-stats">
							<div class="stat-item">
								<span class="stat-number">{{ completedProblems.length }}</span>
								<span class="stat-label">已完成</span>
							</div>
							<div class="stat-item">
								<span class="stat-number">{{ inProgressProblems.length }}</span>
								<span class="stat-label">进行中</span>
							</div>
							<div class="stat-item">
								<span class="stat-number">{{ remainingProblems.length }}</span>
								<span class="stat-label">未开始</span>
							</div>
						</div>
					</div>
				</el-card>

				<!-- 路线信息 -->
				<el-card shadow="hover" class="mb20">
					<h2 class="section-title">
						<el-icon><Document /></el-icon> 路线信息
					</h2>
					<div class="info-item">
						<el-icon><User /></el-icon>
						<span>创建者: {{ route.creator }}</span>
					</div>
					<div class="info-item">
						<el-icon><Calendar /></el-icon>
						<span>创建时间: {{ formatTime(route.createTime) }}</span>
					</div>
					<div class="info-item">
						<el-icon><Refresh /></el-icon>
						<span>最后更新: {{ formatTime(route.updateTime) }}</span>
					</div>
					<div class="info-item">
						<el-icon><Flag /></el-icon>
						<span>适合人群: {{ route.targetAudience }}</span>
					</div>
				</el-card>

				<!-- 相关路线 -->
				<el-card shadow="hover">
					<h2 class="section-title">
						<el-icon><Connection /></el-icon> 相关路线
					</h2>
					<div v-for="related in relatedRoutes" :key="related.rid" class="related-route" @click="goToRoute(related.rid)">
						<div class="related-title">{{ related.name }}</div>
						<div class="related-meta">
							<el-tag :type="getDifficultyType(related.difficulty)" size="small">
								{{ related.difficulty }}
							</el-tag>
							<span>{{ related.problemCount }}题</span>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
	CirclePlus,
	Star,
	StarFilled,
	InfoFilled,
	Aim,
	List,
	DataLine,
	Document,
	Calendar,
	Refresh,
	Flag,
	Connection,
	Collection,
	User,
	Clock,
	CircleCheckFilled,
	Loading,
	CircleCloseFilled,
} from '@element-plus/icons-vue';
import dayjs from 'dayjs';

const router = useRouter();
const routeParams = useRoute();

// 当前路线数据
const route = ref({
	rid: parseInt(routeParams.params.id),
	name: 'LeetCode 初级算法',
	contents:
		'本路线包含LeetCode初级算法题目，适合刚接触算法的新手学习。路线从基础数据结构开始，逐步过渡到简单算法，帮助学习者建立算法思维基础。每道题目都配有详细解析和代码示例，建议按顺序学习效果更佳。',
	object: '掌握基础数据结构和算法，能够解决简单级别的算法问题',
	difficulty: '初级',
	studyCount: 2543,
	estimateTime: 20,
	creator: '算法学院',
	createTime: '2023-01-15',
	updateTime: '2023-06-20',
	targetAudience: '算法初学者，计算机专业学生',
	problems: [
		{ id: 1, title: '两数之和', difficulty: '简单', tags: ['数组', '哈希表'] },
		{ id: 2, title: '反转字符串', difficulty: '简单', tags: ['字符串'] },
		{ id: 3, title: '合并两个有序链表', difficulty: '简单', tags: ['链表'] },
		{ id: 4, title: '有效的括号', difficulty: '简单', tags: ['栈'] },
		{ id: 5, title: '最大子序和', difficulty: '简单', tags: ['数组', '动态规划'] },
		{ id: 6, title: '爬楼梯', difficulty: '简单', tags: ['动态规划'] },
		{ id: 7, title: '二叉树的中序遍历', difficulty: '中等', tags: ['树', '递归'] },
		{ id: 8, title: '对称二叉树', difficulty: '简单', tags: ['树'] },
		{ id: 9, title: '买卖股票的最佳时机', difficulty: '简单', tags: ['数组', '动态规划'] },
		{ id: 10, title: '只出现一次的数字', difficulty: '简单', tags: ['位运算'] },
	],
});

// 相关路线数据
const relatedRoutes = ref([
	{ rid: 2, name: 'LeetCode 中级算法', difficulty: '中级', problemCount: 15 },
	{ rid: 5, name: '数据结构专项突破', difficulty: '中级', problemCount: 30 },
	{ rid: 7, name: '算法面试入门', difficulty: '初级', problemCount: 12 },
]);

// 用户学习进度数据
const completedProblems = ref([1, 2, 3]);
const inProgressProblems = ref([4, 5]);
const isBookmarked = ref(false);

// 计算属性
const remainingProblems = computed(() => {
	return route.value.problems
		.filter((p) => !completedProblems.value.includes(p.id))
		.filter((p) => !inProgressProblems.value.includes(p.id))
		.map((p) => p.id);
});

const progressPercentage = computed(() => {
	return Math.round((completedProblems.value.length / route.value.problems.length) * 100);
});

const progressColors = computed(() => {
	return [
		{ color: '#f56c6c', percentage: 20 },
		{ color: '#e6a23c', percentage: 40 },
		{ color: '#5cb87a', percentage: 60 },
		{ color: '#1989fa', percentage: 80 },
		{ color: '#6f7ad3', percentage: 100 },
	];
});

// 方法
const getDifficultyType = (difficulty) => {
	switch (difficulty) {
		case '初级':
			return 'success';
		case '中级':
			return 'warning';
		case '高级':
			return 'danger';
		default:
			return 'info';
	}
};

const getProblemDifficultyType = (difficulty) => {
	switch (difficulty) {
		case '简单':
			return 'success';
		case '中等':
			return 'warning';
		case '困难':
			return 'danger';
		default:
			return 'info';
	}
};

const formatTime = (time) => {
	return dayjs(time).format('YYYY-MM-DD');
};

const startRoute = () => {
	ElMessage.success(`开始学习路线: ${route.value.name}`);
	// 这里可以添加实际开始学习的逻辑
};

const toggleBookmark = () => {
	isBookmarked.value = !isBookmarked.value;
	ElMessage.success(isBookmarked.value ? '已收藏路线' : '已取消收藏');
};

const goToProblem = () => {
	router.push(`/problem`);
};

const goToRoute = (rid) => {
	router.push(`/route/${rid}`);
};

// 初始化
onMounted(() => {
	// 这里可以添加获取路线详情的API调用
	console.log(`加载路线ID: ${route.value.rid}的详情`);
});
</script>

<style scoped>
.route-detail-container {
	max-width: 1400px;
	margin: 0 auto;
}

.route-header {
	background-color: #f8fafc;
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.route-meta {
	flex: 1;
}

.route-title {
	margin: 10px 0;
	font-size: 24px;
	color: #333;
}

.route-stats {
	display: flex;
	gap: 20px;
	color: #666;
}

.stat-item {
	display: flex;
	align-items: center;
}

.stat-item .el-icon {
	margin-right: 5px;
}

.route-actions {
	flex-shrink: 0;
}

.section-title {
	margin: 0 0 15px 0;
	font-size: 18px;
	color: #333;
	display: flex;
	align-items: center;
}

.section-title .el-icon {
	margin-right: 8px;
}

.route-content,
.route-objective {
	line-height: 1.8;
	color: #555;
}

.problem-title {
	color: #333;
	text-decoration: none;
}

.problem-title:hover {
	color: #409eff;
	text-decoration: underline;
}

.progress-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.progress-stats {
	display: flex;
	justify-content: space-around;
	width: 100%;
	margin-top: 20px;
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stat-number {
	font-size: 20px;
	font-weight: bold;
	color: #333;
}

.stat-label {
	font-size: 12px;
	color: #999;
}

.info-item {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
	color: #666;
}

.info-item .el-icon {
	margin-right: 8px;
	color: #999;
}

.related-route {
	padding: 12px 0;
	border-bottom: 1px solid #eee;
	cursor: pointer;
}

.related-route:hover {
	background-color: #f8fafc;
}

.related-title {
	font-size: 14px;
	margin-bottom: 5px;
}

.related-meta {
	display: flex;
	align-items: center;
	font-size: 12px;
	color: #999;
}

.related-meta .el-tag {
	margin-right: 8px;
}

.el-progress {
	margin: 20px 0;
}
</style>
